<template>
  <div class="add">
    <div class="add2">
      <h3>编辑水票</h3>

      <div class="xinxi">
        <div class="sx-top">
          <p class="p2">基础信息</p>
        </div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="水票名称: " prop="name" required>
            <el-input v-model="ruleForm.name" style="width: 65%"></el-input>
          </el-form-item>

          <el-form-item label="副标题: " prop="name">
            <el-input v-model="ruleForm.name" style="width: 65%"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="xiaoshou">
        <div class="sx-top">
          <p class="p2">销售信息</p>
        </div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品图片: " required>
            <div style="display: flex; height: 50px">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :limit="6"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                  style="height: 80px; font-size: 20px; margin-top: 10px"
                >
                  <span style="font-size: 12px; margin: 0">添加上传图片 </span>
                </i>
              </el-upload>
              <p style="font-size: 12px; margin: 2px 0 0 20px; color: #409eff">
                恢复默认图片
              </p>
            </div>
          </el-form-item>

          <el-form-item label="单价: " prop="name" required>
            <el-input v-model="ruleForm.name" style="width: 65%"></el-input>
          </el-form-item>

          <el-form-item label="设置套餐价： " prop="name">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
          </el-form-item>

          <el-form-item label="套餐类型:  " prop="name">
            <el-checkbox v-model="checked">标准套餐</el-checkbox>
            <el-checkbox v-model="checked">套餐1</el-checkbox>
            <el-checkbox v-model="checked">套餐2</el-checkbox>
            <el-checkbox v-model="checked">套餐3</el-checkbox>
          </el-form-item>
        </el-form>

        <div class="taocan">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              prop="date"
              label="* 套餐名"
              align="center"
              width="180"
            >
              <el-input
                v-model="input"
                placeholder="请输入内容"
                style="width: 120px"
              ></el-input>
            </el-table-column>
            <el-table-column
              prop="name"
              label="* 套餐内商品数"
              align="center"
              width="180"
            >
              <el-input
                v-model="input"
                placeholder="请输入内容"
                style="width: 120px"
              ></el-input>
            </el-table-column>
            <el-table-column prop="address" align="center" label="* 总价 ">
              <el-input
                style="width: 120px"
                placeholder="请输入内容"
                v-model="input1"
                :disabled="true"
              >
              </el-input>
            </el-table-column>
            <el-table-column
              prop="address2"
              align="center"
              label="* 套餐折扣价 "
            >
              <el-input
                v-model="input"
                placeholder="请输入内容"
                style="width: 120px"
              ></el-input>
            </el-table-column>
          </el-table>
        </div>

        <div class="shiyong">
          <p>适用商品：</p>
          <el-button
            type="primary"
            style="margin: 0 30px; width: 120px; height: 40px"
            >编辑商品</el-button
          >
          <p style="color: red">
            注意：水票创建成功后，指定商品只能增加不能减少！
          </p>
        </div>

        <div class="sysp">
          <div class="sysp-top">
            <p>适用商品：5</p>
            <el-input
              style="width: 150px"
              placeholder="搜索商品名称"
              prefix-icon="el-icon-search"
              v-model="input21"
            >
            </el-input>
          </div>

          <el-table
            :data="tableData2"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column type="selection" width="55"   > </el-table-column>
            <el-table-column    >
              <template slot-scope="scope">
                  <p>{{ scope.row.item && scope.row.item.xuhao }}</p>
                  <div>
                      <p style="margin: 0">
                  {{ scope.row.item && scope.row.item.bianhao }}
                </p>
                <div style="display: flex">
                   
                  <img
                    style="width: 80px; height: 60px"
                    :src="scope.row.item && scope.row.item.img"
                    alt=""
                  />
                  <p style="line-height: 80px; margin: 0">
                    {{ scope.row.item && scope.row.item.shop }}
                  </p>
                </div>
                  </div>
                
              </template>
            </el-table-column>
            <el-table-column prop="danjia"   align="center"> </el-table-column>
          </el-table>
        </div>
      </div>

      <footer>
        <div class="foot">
          <el-button class="btn1" type="info" @click="fanhui">返回</el-button>
          <el-button class="btn2" type="primary">保存新建</el-button>
          <el-checkbox class="shangjia" v-model="checked">立即上架</el-checkbox>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      textarea: "",
      radio: "1",
      input1: "",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [
        {
          date: "一桶",
          name: "1",
          address: "5",
          address2: "1",
        },
        {
          date: "买十送一",
          name: "11",
          address: "50",
          address2: "11",
        },
      ],
      tableData2: [
        {
        xuhao:"1",
          danjia: "¥ 239.00/件",
          item: {
            bianhao: "商品编号：1232312312222222222",
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
        {
             xuhao:"2",
          danjia: "¥ 239.00桶",
          item: {
            bianhao: "商品编号：1232312312222222222",
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
        {
             xuhao:"3",
          danjia: "¥ 239.00/件",
          item: {
            bianhao: "商品编号：1232312312222222222",
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
      ],
    };
  },
  methods:{
      fanhui(){
          this.$router.back()
      }
  }
};
</script>

<style lang="scss" scoped>
.add {
  width: 98%;
  margin: 1%;
  background-color: #fff;
  overflow: hidden;
 
  .add2 {
    padding: 2% 10% 4% 4%;
    .head {
      width: 100%;
      height: 40px;
      margin-bottom: 20px;
      .p1 {
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #f0f0f0;
      }
    }

    .xinxi,
    .xiaoshou {
      padding: 0 2%;
      overflow: hidden;
      border: 1px solid #eee;
      overflow: hidden;
      margin-bottom: 15px;
      .sx-top {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #f0f0f0;
        border-bottom: 1px solid #aaa;
        margin-bottom: 10px;
        .p2 {
          margin: 0;
        }
      }
      .el-form,
      .demo-ruleForm {
        .el-form-item,
        .is-required {
          margin-left: 7%;
        }
      }
    }
    .xiaoshou {
      width: 100%;
      overflow: hidden;
      .taocan {
        width: 80%;
        overflow: hidden;
        // text-align: center;
        margin-left: 10%;
      }
      .shiyong {
        display: flex;
        margin: 30px 0;
      }
      .sysp {
        padding: 0 2%;
        .sysp-top {
          width: 70%;
          display: flex;
          justify-content: space-between;
          margin-left: 10%;
        }
        .el-table,.el-table--fit,.el-table--enable-row-hover,.el-table--enable-row-transition{
            .el-table__header-wrapper{
                width: 0;
            }
        }
      }
    }

    footer {
      width: 100%;
      height: 60px;
      margin-bottom: 30px;
      .foot {
        width: 50%;
        height: 40px;
        display: flex;
        justify-content: space-around;
        margin-left: 25%;
        .btn1,
        .btn2 {
          width: 140px;
          height: 40px;
        }
        .shangjia {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>